<!--
  独立页面，用来测试iframe嵌套此项目，如何进行标绘操作，
  浏览器本地访问此页面即可
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标绘功能 - 仅标绘</title>
  <style>
    html,
    body,
    .full {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    .full {
      position: relative;
    }

    .business-layout {
      position: absolute;
      z-index: 2;
      left: 10px;
      top: 10px;
      width: 250px;
      height: 80%;
      background: rgba(255, 255, 255, 0.8);
    }

    .earth-layout {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
    }
  </style>
</head>

<body>
  <div class="full">
    <div class="earth-layout">
      <iframe id="myframe" frameborder="0" width="100%" height="100%"></iframe>
    </div>
  </div>

  <script>
    // const earthUrl = 'http://192.168.20.123:9797/#/?func=plotting&onlyPlot=true&noScale=true'
    // &noScale=true
    const earthUrl = 'http://192.168.50.131:30012/#/?func=plotting&onlyPlot=true&noScale=true'
    window.onload = function () {
      const _iframe = document.querySelector("#myframe")
      _iframe.setAttribute('src', earthUrl)
      _iframe.onload = handeLoad
    }

    window.addEventListener('message', receiveMsg)

    // 加载瓦片地址【必要】
    function handeLoad(e) {
      const target = e.target
      setTimeout(() => {
        const jsonStr = JSON.stringify({
          type: 'Tileset',
          data: {
            // url: 'http://182.151.56.8:3333/SiChuan/GuangYuan/E-GY010/tileset.json',
            url: 'http://182.151.56.8:3333/SiChuan/GuangYuan/P-GY001/tileset.json'
          }
        })
        target.contentWindow.postMessage(jsonStr, '*')
        handleLayoutReset()
      }, 1000);

    }

    /**
     * 【只有当 onlyPlot 传递了，才会接收到消息】
     * 标绘数据完成后接收数据
     */
    function receiveMsg(e) {
      // window.open(e.data);
      console.log(JSON.parse(e.data), '标绘数据')
      window.flutter_inappwebview.callHandler('receiveMsg', e.data);
    }

    function handleLayoutReset() {
      let res = {
        type: 'setToolLayout',
        data: {
          include: ['图标点'], // 只能启用一个
          operTool:{
            include:['完成'],
            style:{
              fontSize:'20px'
            }
          }
        }
      }

      const jsonStr = JSON.stringify(res)

      document.querySelector('#myframe').contentWindow.postMessage(jsonStr, '*')
    }
  </script>
</body>

</html>